<div style="position: absolute;right: 5%;top: 5%">
    <header-i18n style="font-size: 1.3em;color: #000" [showLangText]="false"></header-i18n>
</div>
<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
    <nz-tabset [nzAnimated]="false" class="tabs" (nzSelectChange)="switch($event)">
        <nz-tab [nzTitle]="'login.account_pwd_login'|translate">
            <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
            <!--账号-->
            <nz-form-item>
                <nz-form-control>
                    <nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-user">
                        <input nz-input formControlName="userName" [placeholder]="'login.account'|translate">
                    </nz-input-group>
                    <nz-form-explain *ngIf="userName.dirty && userName.errors">
                        {{'login.validate.account'|translate}}
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <!--密码-->
            <nz-form-item>
                <nz-form-control>
                    <nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-lock" [nzAddOnAfter]="controlPwd">
                        <input nz-input [type]="passwordType" formControlName="password"
                               [placeholder]="'login.pwd'|translate">
                    </nz-input-group>
                    <ng-template #controlPwd>
                        <i class="fa fa-eye-slash point" [hidden]="passwordType=='text'"
                           (click)="passwordType='text'"></i>
                        <i class="fa fa-eye point" [hidden]="passwordType=='password'"
                           (click)="passwordType='password'"></i>
                    </ng-template>
                    <nz-form-explain *ngIf="password.dirty && password.errors">
                        {{'login.validate.pwd'|translate}}
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <!--图形验证码-->
            <nz-form-item *ngIf="useVerifyCode">
                <nz-form-control>
                    <nz-input-group nzSize="large">
                        <input nz-input type="text" [maxLength]="10" formControlName="verifyCode"
                               [placeholder]="'login.validate_code'|translate">
                        <img [src]="verifyCodeUrl" [alt]="'login.validate_code'|translate" (click)="changeVerifyCode()"
                             style="position: absolute;z-index: 9;right: 1px;top: 1px;">
                    </nz-input-group>
                </nz-form-control>
            </nz-form-item>
        </nz-tab>
    </nz-tabset>
    <nz-form-item>
        <nz-col [nzSpan]="12" class="text-left">
            <a *ngIf="registerPage" class="forgot" [href]="registerPage">{{'login.register'|translate}}</a>
        </nz-col>
        <nz-col [nzSpan]="12" class="text-right">
            <a class="forgot" (click)="forgot()">{{'login.forget_pwd'|translate}}</a>
        </nz-col>
    </nz-form-item>

    <nz-form-item>
        <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading"
                style="display:block;width: 100%;">{{'login.button'|translate}}
        </button>
    </nz-form-item>
</form>
